
<template>
  <BaseCharts :option="option"></BaseCharts>
</template>

<script lang="ts" setup>
import BaseCharts from '../../base/baseCharts.vue';

const scaleData = [
  {
    name: "花瓣1",
    value: 10,
  },
  {
    name: "花瓣2",
    value: 10,
  },
  {
    name: "花瓣3",
    value: 30,
  },
  {
    name: "花瓣4",
    value: 10,
  },
  {
    name: "花瓣5",
    value: 10,
  },
]

/** 创建一个随机颜色 */
const createColor = () => {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

/** 设置随机颜色 */
const rancolors = (len: number) => {
  let color = [];
  for (let i = 0; i <= len; i++) {
    let sjys = createColor();
    color.push(sjys);
    for (let j = 0; j < color.length; j++) {
      if (color[j] === sjys) {
        color[j] = createColor();
      }
    }
  }

  return color;
}

let data = [];
let color = rancolors(5);
for (let i = 0; i < scaleData.length; i++) {
  data.push(
    {
      value: scaleData[i].value,
      name: scaleData[i].name,
      itemStyle: {
        borderWidth: 40,
        shadowBlur: 20,
        borderColor: color[i],
        shadowColor: color[i],
      },
    },
    {
      value: 80,
      name: "",
      itemStyle: {
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        color: "rgba(0, 0, 0, 0)",
        borderColor: "rgba(0, 0, 0, 0)",
        borderWidth: 0,
      },
    }
  );
}
let seriesObj = [
  {
    name: "",
    type: "pie",
    radius: [30, 60],
    emphasis: {
      scale: false
    },
    itemStyle: {
      label: {
        show: false,
        position: "outside",
        color: "#ddd",
        formatter: function (params: any) {
          let percent = 0;
          let total = 0;
          for (let i = 0; i < scaleData.length; i++) {
            total += scaleData[i].value;
          }
          percent = Number(((params.value / total) * 100).toFixed(0))
          if (params.name !== "") {
            return params.name + "\n{white|" + "占比" + percent + "%}";
          }
          return "";
        },
        rich: {
          white: {
            color: "#ddd",
            align: "center",
            padding: [3, 0],
          }
        },
      },
      labelLine: {
        length: 6,
        length2: 3,
        show: false,
        color: "#00ffff",
      },
    },
    data: data,
  },
];

const option = {
  grid: {
    left: 0,
  },
  backgroundColor: "rgba(0,0,0,0)",
  title: {
    text: "77.65%",
    x: "center",
    y: "center",
    textStyle: {
      fontSize: 20,
      color: "rgba(255, 240, 0, 1)",
      fontStyle: "italic",
    },
    subtextStyle: {
      fontSize: 16,
      color: "rgba(255, 240, 255, 1)",
    },
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
  tooltip: {
    show: false,
  },
  legend: {
    show: false,
  },
  toolbox: {
    show: false,
  },
  series: seriesObj,
}
</script>

<style scoped lang="scss"></style>
